<template>
  <div class="flex gap-4 justify-center">
    <button class="px-6 py-2 rounded bg-red-600 text-white font-bold" @click="onClear">CLEAR</button>
    <button class="px-6 py-2 rounded bg-blue-600 text-white font-bold" @click="onNext">NEXT</button>
  </div>
</template>

<script setup>
import api from '../logic/api'
import { defineEmits } from 'vue'

const emit = defineEmits(['cleared', 'next'])

async function onClear() {
  await api.game.clear()
  emit('cleared')
}

function onNext() {
  emit('next')
}
</script> 